<template>
    <el-container>
        <el-header>
            <mu-flex justify-content="center" align-items="center">
                <mu-button full-width color="success" @click="gotoUpload()">前往上传界面</mu-button>
            </mu-flex>
        </el-header>
        <el-main>
            <el-card>
                <div id="player"></div>
            </el-card>
        </el-main>
    </el-container>
</template>
<script>
    import 'aplayer/dist/APlayer.min.css';
    import Aplayer from 'aplayer';
    import '../../assets/js/plugins/color-thief/color-thief.js';
    import ColorThief from "../../assets/js/plugins/color-thief/color-thief";

    export default {
        name: "musicview",
        data() {
            return {
                musitList: []
            }
        },
        methods: {
            initPlayer() {
                const ap = new Aplayer({
                    container: document.getElementById('player'),
                    listFolded: false,
                    listMaxHeight: 90,
                    preload: 'auto',
                    autoplay: true,
                    // fixed: true,//吸底模式
                    // mini: true,//迷你模式
                    lrcType: 3,
                    audio: this.musitList
                });
                //颜色自取
                const colorThief = new ColorThief();
                const setTheme = (index) => {
                    //歌曲无主题
                    if (!ap.list.audios[index].theme) {
                        colorThief.getColorAsync(ap.list.audios[index].cover, function () {
                            ap.theme('rgb(${color[0]},${color[1]},${color[2]})', index);
                        });
                    }
                };
                setTheme(ap.list.index);
                ap.on('listswitch', (index) => {
                    setTheme(index.index);
                })
            },
            //获取音乐列表
            getMusicList() {
                this.$axios.post("/api/music/getMusicList",
                    this.$qs.stringify({
                        createby: 1,
                    })).then(res => {
                    console.log(res);
                    let result = res.data;
                    let data = result.data;
                    if (result && result.code === 200) {
                        console.log("data get it！");
                        this.musitList.push(...data);
                        this.initPlayer();
                    } else {
                        console.log("data get failed.");
                    }
                })
            },
            //前往上传界面
            gotoUpload() {
                this.$router.push("/upload");
            }

        },
        created() {

        },
        mounted() {
            this.getMusicList();

        }
    }
</script>

<style scoped>

</style>